<!--围栏地图页面-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">新增围栏</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="router.push('/geofence')">返回</el-button>
  </div>
  <!--div地图容器-->
  <div id="mapContainer" style="width: 100%;height: 84vh;"></div>
  <!--新建围栏弹窗-->
  <el-dialog title="新建围栏" v-model="visible" :before-close="dCls">
    <el-form label-width="80px">
      <el-form-item label="围栏名称">
        <el-input v-model="gfData.name" placeholder="请输入围栏名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dCls">取消</el-button>
      <el-button type="primary" @click="saveGeofence">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import {DrawScene, DrawControl, OperateEventType} from 'bmap-draw';
import axios from "axios";
import {ElMessage} from "element-plus";  // 导入包，用于获取地图绘制的插件

// 定义围栏对象变量，用于向后端发送新增请求时传递参数
const gfData = ref({
  name: '',  // 围栏名称
  position: {}  // 围栏坐标点,也是一个对象
});

// 定义变量，控制新增围栏弹窗是否出现
const visible = ref(false);
var map;  // 地图对象
var overlay;
onMounted(() => {
  // nextTick()方法：当页面渲染完毕后再执行里面的代码（要确认地图容器已创建才能加入地图）
  nextTick(() => {
    // 创建地图实例，不要导入BMapGL，此组件由index.html中引入的百度地图脚本实现
    map = new BMapGL.Map("mapContainer");          // 创建地图实例
    var point = new BMapGL.Point(104.065850, 30.657361);  // 创建点坐标
    map.centerAndZoom(point, 15);  // 初始化地图，设置中心点坐标和缩放级别
    // 添加鼠标绘制控件
    const scene = new DrawScene(map);
    const drawContrl = new DrawControl(scene, {
      enableTips: true,  // 控件操作提示
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      drawingItems: [  // 控件类型
        // 'marker',
        // 'polyline',
        // 'polygon',  // 这三个目前不需要
        'circle',
        'rectangle'
      ]
    });
    map.addControl(drawContrl);

    // 监听绘制完成时间，获取划定坐标点
    scene.addEventListener(OperateEventType.COMPLETE, (event) => {
      // event.target：获取绘制图形的事件目标对象
      // console.log(event.target);
      // 获取位置数据
      overlay = event.target.overlay;  // 拿到覆盖物
      console.log(overlay);
      // 判断当前的围栏是圆形or矩形
      if (overlay instanceof BMapGL.Circle) {
        gfData.value.position.type = 'circle';  // 圆形
        gfData.value.position.longitude = overlay.getCenter().lng;  // 获取中心点（圆心）经度
        gfData.value.position.latitude = overlay.getCenter().lat;  // 获取中心点（圆心）纬度
        gfData.value.position.radius = overlay.getRadius();  // 获取半径
      } else {  // 矩形
        gfData.value.position.type = 'rectangle';
        // 准备数组用于存放围栏的四个顶点经纬度值
        let recPoints = [];
        for (let i = 0; i < 4; i++) {
          // 循环四次，依次取出每个顶点的经纬度，按数据样例（“经度-维度”）拼接后存入数组
          console.log(overlay.points[i].latLng);
          recPoints.push(overlay.points[i].latLng.lng + '-' + overlay.points[i].latLng.lat);
        }
        gfData.value.position.points = recPoints.join(',');
      }
      console.log(gfData.value);
      visible.value = true;  // 点击对钩时显示弹窗，准备保存数据
    })
  })
})

const saveGeofence = () => {
  if (!gfData.value.name || gfData.value.name.trim() == '') {
    ElMessage.error('围栏名称不能为空！');
    return;
  }
  let data = {
    name: gfData.value.name,
    position: JSON.stringify(gfData.value.position)
  }
  // 发送请求给后端
  axios.post(BASE_URL + '/v1/geofence/save', data)
      .then((response) => {
        //.then()回调函数,用于处理后端返回的响应数据
        // response响应对象 response.data后端响应的JsonResult
        console.log(response.data);
        if (response.data.code == 2000) {
          ElMessage.success('新增围栏成功！');
          router.push('/geofence');
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}

const dCls = () => {
  // map.clearOverlays();  // 清除地图上绘制的所有图形（覆盖物）
  console.log(overlay instanceof BMapGL.Overlay)
  map.removeOverlay(overlay);  // 移除指定的覆盖物
  visible.value = false;
  gfData.value = {
    name: '',
    position: {}
  }  // 因为position是一个对象，所以此处清空不能粗暴地gfData.value = {}，否则将无法继续存值
}
</script>

<style scoped>

</style>